<template>
  <div ref="chart" style="width: 100%; height: 259px" v-loading="chartLoading"></div>
</template>

<script>
import timeUtil from "@/libs/timeUtil";
import {useHttp} from "@/view/wms/js/index";
import * as echarts from 'echarts';
import 'echarts/theme/macarons.js';
import {off, on} from "@/libs/tools";

export default {
  name: "WmsTaskLine",
  computed: {
    unitList() {
      const {label} = this.unitOptions.find(i => i.value === this.unitMode);
      const unit = label.split('（')[1].replace('）', '');
      return unit.includes('/') ? unit.split('/') : [unit, unit];
    },
  },
  data() {
    return {
      dateMode: 'day',
      unitMode: 'weightNum',
      chartLoading: false,
      taskData: {},
      dom: null,
      unitOptions: [
        {
          value: 'weightNum',
          label: '重量（吨）',
        },
        {
          value: 'orderHdNum',
          label: '箱数/车数（柜/车）',
        },
        {
          value: 'totalNum',
          label: '件数（件）',
        },
        {
          value: 'traceNum',
          label: '托数（托）',
        },
      ],
    }
  },
  methods: {
    resize() {
      this.dom.resize();
    },
    handleDate(date) {
      const d = `${timeUtil.timestampToDate(date)} 08:00:00`;
      return new Date(d).getTime();
    },
    init(wmsUrl, whCode, ownerCodeList, dates) {
      if (!wmsUrl) {
        return console.error('WMS http 为空！');
      }
      this.chartLoading = false;
      useHttp('/api/wms_out_order_hd/outInBoundStatusV2', {
        whCodes: whCode,
        dateField: this.dateMode,
        startTime: this.handleDate(dates[0]),
        endTime: this.handleDate(dates[1]),
        ownerCodeList
      }, wmsUrl).then(response => {
        this.taskData = response.data.returnData;
        this.initCharts(this.taskData, this.unitMode, this.unitList)
      });
    },
    initCharts(returnData, dataKey, unitList) {
      const inData = returnData.in.statisticsInfosMap;
      const outData = returnData.out.statisticsInfosMap;
      const xData = Object.keys(inData);
      const option = {
        color: ['#23a365', '#4579fa'],
        dataZoom: [
          {
            type: 'inside',
            xAxisIndex: [0]
          }
        ],
        legend: {
          show: true,
          top: "5%",
          right: "5%",
          textStyle: {
            color: '#595959',
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "#fff",
          textStyle: {
            color: "#595959"
          },
          padding: [10, 10],
          extraCssText: "box-shadow: 0px 8px 20px 0px rgba(26, 62, 153, 0.1);",
          axisPointer: {
            type: 'line',
            lineStyle: 'dotted'
          },
          formatter: (params,ticket,callback) => {
            let render = `<p>${params[0].axisValue}</p>`;
            for (const item of params) {
              render +=
                `<p style="width: 200px">
                                <div style="display: inline-block; margin: 0 4px 1px 0; background-color: ${item.color}; border-radius: 50%; width: 8px; height: 8px;"></div>
                                <span>${item.seriesName}: </span>
                                <span style="color: #262626; font-size: 16px;">${item.value}</span>
                                <span>${unitList[item.seriesIndex]}</span>
                                `
              if(item.seriesName === '入库'){
                render += `<span>(${inData[item.axisValue].orderHdNum}柜)</span>`
              }else{
                render += `<span>(${outData[item.axisValue].orderHdNum}车)</span>`
              }
            }
            return render;
          }
        },
        grid: {
          top: '15%',
          right: 20,
          bottom: 30,
        },
        xAxis: {
          data: xData,
          axisTick: {
            alignWithLabel: true,
            lineStyle: {
              color: '#d9d9d9',
              width: 1
            },
          },
          axisLabel: {
            color: '#595959',
            margin: 20,
          },
          axisLine: {
            lineStyle: {
              color: '#d9d9d9',
              width: 1
            },
          },
        },
        yAxis: {
          type: 'value',
          boundaryGap: true,
          splitNumber: 4,
          nameGap: 35,
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#595959',
          },
          axisLine: {
            show: false
          },
          splitLine: {
            lineStyle: {
              color: '#e8e8e8',
              width: 1,
              type: 'dotted'
            },
          },
          splitArea: {
            show: false
          }
        },
        series: [
          {
            type: 'line',
            name: '入库',
            data: Object.values(inData).map(item => item[dataKey].toFixed(2)),
            showSymbol: false,
            smooth: true,
            lineStyle: {
              width: 2,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#23a365',
                },
                {
                  offset: 1,
                  color: '#23a36500',
                },
              ]),
              opacity: 0.3
            },
          },
          {
            type: 'line',
            name: '出库',
            data: Object.values(outData).map(item => item[dataKey].toFixed(2)),
            showSymbol: false,
            smooth: true,
            lineStyle: {
              width: 2,
            },
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: '#4579fa',
                },
                {
                  offset: 1,
                  color: '#4579fa00',
                },
              ]),
              opacity: 0.3
            },
          },
        ],
      };
      this.$nextTick(() => {
        this.dom = echarts.init(this.$refs.chart);
        this.dom.setOption(option);
        on(window, "resize", this.resize);
      });
    }
  },
  beforeDestroy() {
    off(window, "resize", this.resize);
  }
}
</script>

<style scoped lang="less">

</style>
